import * as images from 'images';
import { Element } from './layout';

export function render(viewPoint: images.Image, element: Element): void {
  const renderQueue = [element];

  while (renderQueue.length > 0) {
    const element = renderQueue.shift()!;

    if (element.style != null) {
      const img = images(element.style.width, element.style.height);

      if (element.style['background-color']) {
        const color = element.style['background-color'] ?? 'rgb(0, 0, 0)';
  
        color.match(/rgb\((\d+), (\d+), (\d+)\)/);
        img.fill(Number(RegExp.$1), Number(RegExp.$2), Number(RegExp.$3), 1);
  
        viewPoint.draw(img, element.style.left ?? 0, element.style.top ?? 0);
      }
    }

    if (element.children != null) {
      renderQueue.push(...element.children);
    }
  }
}